<template>
    <div class="city-list" >
        <div class="c-item" v-for="city in cityList" :key="city" @click="history(city)">{{city}}</div>
    </div>
</template>

<script>
export default {
    props:{
        cityList:{Array}
    },
    data(){
        return{
            historyCity:[],
            hot: [
                {
                    id: 10,
                    nm: "上海",
                    py: "shanghai",
                },
                {
                    id: 1,
                    nm: "北京",
                    py: "beijing",
                },
                {
                    id: 20,
                    nm: "广州",
                    py: "guangzhou",
                },
                {
                    id: 30,
                    nm: "深圳",
                    py: "shenzhen",
                },
                {
                    id: 57,
                    nm: "武汉",
                    py: "wuhan",
                },
                {
                    id: 40,
                    nm: "天津",
                    py: "tianjin",
                },
                {
                    id: 42,
                    nm: "西安",
                    py: "xian",
                },
                {
                    id: 55,
                    nm: "南京",
                    py: "nanjing",
                },
                {
                    id: 50,
                    nm: "杭州",
                    py: "hangzhou",
                },
                {
                    id: 59,
                    nm: "成都",
                    py: "chengdu",
                },
                {
                    id: 45,
                    nm: "重庆",
                    py: "chongqing",
                },
            ]
        }
    },
      
    methods:{
        history(citys){
            console.log(citys)
            // var citys=citys
            this.$router.push({path:"/",city:"citys"})
        }
    },
}
</script>

<style lang="less" scoped>
.city-list{
    padding: 0px 30px 15px 0px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    .c-item{
        float: left;
        background: #fff;
        width: 29%;
        height: 33px;
        margin-top: 15px;
        margin-left: 4%;
        padding: 0 4px;
        border: 1px solid #e6e6e6;
        border-radius: 3px;
        line-height: 33px;
        text-align: center;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>